<!-- 开支编辑弹窗 -->
<template>
  <ele-page>
    <ele-card>
      <template #header> 筛选 </template>
      <el-form label-width="80px" @keyup.enter="fetchData" inline>
        <el-form-item label="报表月份">
          <el-date-picker
            v-model="form.belongs_month"
            class="filter-item"
            type="month"
            value-format="YYYY-MM"
            style="width: 200px"
            @change="fetchData"
          />
        </el-form-item>
        <el-form-item label="区域" prop="area_id">
          <el-select
            v-model="form.area_id"
            clearable
            style="width: 100px"
            @change="fetchData"
          >
            <el-option
              v-for="item in areaList"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="车队" prop="company_id">
          <el-select
            @change="fetchData"
            clearable
            v-model="form.company_id"
            style="width: 350px"
            filterable
          >
            <el-option
              v-for="item in companyList"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="">
          <el-button type="primary" @click="fetchData">查询</el-button>
        </el-form-item>
      </el-form>
    </ele-card>

    <!-- <ele-card v-for="item in list" :key="item.title"> -->
    <ele-card>
      <template #header>
        <span v-if="totalProfit !== 0">总毛利：{{ totalProfit }}</span>
        <span v-if="areaProfit !== 0" class="ml-10">
          区域毛利：{{ areaProfit }}
        </span>
        <span v-if="companyProfit !== 0" class="ml-10">
          车队毛利：{{ companyProfit }}
        </span>
        <span v-if="areaProfit !== 0" class="ml-10">
          区域毛利占比：{{ areaSharePercentage }}%
        </span>
        <span v-if="companyProfit !== 0" class="ml-10">
          车队毛利：{{ companySharePercentage }}%
        </span>
      </template>
      <el-table :data="report" border style="width: 100%">
        <el-table-column prop="title" label="分类" width="200" />
        <el-table-column label="金额">
          <template #default="scope">
            <span class="blue pointer" @click="openFee(scope.row)">{{
              scope.row.amount
            }}</span>
          </template>
        </el-table-column>
      </el-table>
    </ele-card>
    <Manage v-model="showFee" :data="current" />
  </ele-page>
</template>

<script setup>
  import { ref, onMounted, watch } from 'vue';
  import Manage from './components/manage-io.vue';
  import { EleMessage } from 'ele-admin-plus/es';
  import {
    pageMyCompany,
    pageMyCompanyArea,
    getCompanyProfit
  } from '@/api/company';
  import { useRouter } from 'vue-router';

  defineOptions({ name: 'CompanyReport' });

  const { push } = useRouter();
  const list = ref([]);

  onMounted(() => {
    getAreaList();
    getCompanyList();
  });

  /** 车队列表 */
  const companyList = ref([]);
  const getCompanyList = () => {
    console.log('初始化车队列表');
    pageMyCompany({})
      .then((res) => {
        companyList.value = res;
      })
      .catch((e) => {
        console.log(e);
      });
  };

  /** 区域列表 */
  const areaList = ref([]);
  const getAreaList = () => {
    pageMyCompanyArea({ limit: 99999999 })
      .then((res) => {
        res.list.shift();
        areaList.value = res.list;
      })
      .catch((e) => {
        console.log(e);
      });
  };
  const report = ref([]);
  const totalProfit = ref(0);
  const areaProfit = ref(0);
  const companyProfit = ref(0);
  const areaSharePercentage = ref(0);
  const companySharePercentage = ref(0);
  const fetchData = () => {
    if (form.value.belongs_month == '') {
      EleMessage.error('请选择报表月份');
      return;
    }
    const loading = EleMessage.loading({ message: '正在加载中..', mask: true });
    var requestData = Object.assign({}, form.value);
    if (requestData.area_id == null) requestData.area_id = '';
    if (requestData.company_id == null) requestData.company_id = '';
    if (requestData.belongs_month == null) requestData.belongs_month = '';
    getCompanyProfit(requestData)
      .then((res) => {
        loading.close();
        console.log(res);
        report.value = res.reportList;
        totalProfit.value = res.totalProfit;
        areaProfit.value = res.areaProfit;
        companyProfit.value = res.companyProfit;
        areaSharePercentage.value = res.areaSharePercentage;
        companySharePercentage.value = res.companySharePercentage;
      })
      .catch((e) => {
        loading.close();
        console.log(e);
      });
  };

  const form = ref({
    belongs_month: '',
    area_id: '',
    company_id: ''
  });

  const current = ref({});
  const showSalary = ref(false);
  const openSalary = (row) => {
    current.value = row;
    form.value.belongs_date = row.belongs_date;
    showSalary.value = true;
  };

  const openSalaryTable = (row) => {
    push({
      path: '/company/report/table',
      query: {
        id: row.company_id,
        belongs_date: row.belongs_date,
        company: row.company
      }
      // 路由用 query 传参数是以 ? 和 & 拼接在 url 后面的形式
      // 如果用 params 传参数路由注册时必须申明了 /:xxx 形式的才能接收到
    });
  };
  const showFee = ref(false);
  const openFee = (row) => {
    current.value = {
      cate_id: row.cate_id,
      belongs_month: form.value.belongs_month,
      area_id: form.value.area_id,
      company_id: form.value.company_id,
      cateTitle: row.title
    };

    showFee.value = true;
  };
  const showInvoice = ref(false);
  const openInvoice = (row) => {
    current.value = row;
    form.value.belongs_date = row.belongs_date;
    showInvoice.value = true;
  };

  const showIncomeExpense = ref(false);
  const openIncomeExpense = (row) => {
    current.value = row;
    form.value.belongs_date = row.belongs_date;
    showIncomeExpense.value = true;
  };
  watch(
    () => form.value.tenant_id,
    (val) => {
      if (val) {
        fetchData(); // tenant_id 设置后再请求
      }
    }
  );
</script>

<style lang="scss" scoped>
  .panel-group {
    margin-top: 18px;

    .card-panel-col {
      margin-bottom: 32px;
    }

    .card-panel {
      height: 108px;
      cursor: pointer;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #666;
      background: #fff;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
      border-color: rgba(0, 0, 0, 0.05);
      border-radius: 10px;

      &:hover {
        .card-panel-icon-wrapper {
          color: #fff;
        }

        .icon-people {
          background: #40c9c6;
        }

        .icon-message {
          background: #36a3f7;
        }

        .icon-money {
          background: #f4516c;
        }

        .icon-shopping {
          background: #34bfa3;
        }
      }

      .icon-people {
        color: #40c9c6;
      }

      .icon-message {
        color: #36a3f7;
      }

      .icon-money {
        color: #f4516c;
      }

      .icon-shopping {
        color: #34bfa3;
      }

      .card-panel-icon-wrapper {
        float: left;
        margin: 14px 0 0 14px;
        padding: 16px;
        transition: all 0.38s ease-out;
        border-radius: 6px;
      }

      .card-panel-icon {
        float: left;
        font-size: 48px;
      }

      .card-panel-description {
        float: right;
        font-weight: bold;
        margin: 26px;
        margin-left: 0px;

        .card-panel-text {
          line-height: 18px;
          color: rgba(0, 0, 0, 0.45);
          font-size: 16px;
          margin-bottom: 12px;
        }

        .card-panel-num {
          font-size: 20px;
        }
      }
    }
  }

  @media (max-width: 550px) {
    .card-panel-description {
      display: none;
    }

    .card-panel-icon-wrapper {
      float: none !important;
      width: 100%;
      height: 100%;
      margin: 0 !important;

      .svg-icon {
        display: block;
        margin: 14px auto !important;
        float: none !important;
      }
    }
  }
  .val {
    font-size: 20px;
  }
</style>
